<template>
  <div class="content">
    <nav-title title="我的信息"/>
    <div class="user_card">
      <div class="user_back">&nbsp;</div>
      <div class="card_info">
        <div class="user_headimg" :style="{backgroundImage: 'url(' + user.headfimg + ')' }">&nbsp;</div>
        <div class="user_infors">
          <div class="nick_name">{{ user.name }}</div>
          <div class="user_info">{{ user.rsFullName }}</div>
          <div class="user_info">{{ user.jobcodeDescr }}</div>
          <div class="user_info">{{ user.rsWklifBgnDt }}入职</div>
          <div class="user_phone">{{user.phone}}</div>
        </div>
      </div>
    </div>
    <folding title="基本信息" @feedback="setIsShowType" :initshow="true">
        <div class="normal-info">
          <infor-line title="员工ID" v-bind:value="bsinfo.emplid"></infor-line>
          <infor-line title="姓名" v-bind:value="bsinfo.name"></infor-line>
          <infor-line title="姓名拼音" v-bind:value="bsinfo.nameAc"></infor-line>
          <infor-line title="账号" v-bind:value="bsinfo.cAccount"></infor-line>
          <infor-line title="性别" v-bind:value="bsinfo.sexValue"></infor-line>
          <infor-line title="国籍" v-bind:value="bsinfo.countryValue"></infor-line>
          <infor-line title="出生日期" v-bind:value="bsinfo.birthdate"></infor-line>
          <infor-line title="民族" v-bind:value="bsinfo.ethnicGrpCdValue"></infor-line>
          <infor-line title="籍贯" v-bind:value="bsinfo.nativePlaceChn"></infor-line>
          <infor-line title="最高学历" v-bind:value="bsinfo.highestEducLvlValue"></infor-line>
          <infor-line title="最高学位" v-bind:value="bsinfo.cDegreeValue"></infor-line>
          <infor-line title="专业" v-bind:value="bsinfo.cMajor"></infor-line>
          <infor-line title="就学类型" v-bind:value="bsinfo.cTolType2Value"></infor-line>
          <infor-line title="毕业类型" v-bind:value="bsinfo.cGraTypeValue"></infor-line>
          <infor-line title="毕业院校" v-bind:value="bsinfo.cSchool"></infor-line>
          <infor-line title="学制（年）" v-bind:value="bsinfo.cSchoolSystem"></infor-line>
          <infor-line title="毕业时间" v-bind:value="bsinfo.cGraEndDt"></infor-line>
          <infor-line title="第二专业" v-bind:value="bsinfo.cSecMajor"></infor-line>
          <infor-line title="参加工作日期" v-bind:value="bsinfo.startDtChn"></infor-line>
          <infor-line title="报到时间" v-bind:value="bsinfo.rsWklifBgnDt"></infor-line>
          <infor-line title="首次入司时间" v-bind:value="bsinfo.firstInCompanyDt"></infor-line>
          
          
          <infor-line title="技术职称" v-bind:value="bsinfo.cZcJszc"></infor-line>
          <infor-line title="职称等级" v-bind:value="bsinfo.cPfqTypeValue"></infor-line>
          <infor-line title="入职来源" v-bind:value="bsinfo.cEmplFromValue"></infor-line>
          <infor-line title="人才计划" v-bind:value="bsinfo.cEmplSchedValue"></infor-line>
          <!-- <infor-line title="大学生届数" v-bind:value="bsinfo.cNumStu"></infor-line> -->
          
          <infor-line title="政治面貌" v-bind:value="bsinfo.politicalStaChnValue"></infor-line>
          <infor-line title="推荐人" v-bind:value="bsinfo.cPerTjr"></infor-line>
          <infor-line title="转正日期" v-bind:value="bsinfo.zhuanzhengDt"></infor-line>
          <infor-line title="婚姻状况" v-bind:value="bsinfo.marStatusValue"></infor-line>
          <infor-line title="证件过期日期" v-bind:value="bsinfo.cNatExperDt"></infor-line>
          <infor-line title="户口性质" v-bind:value="bsinfo.cHukTypeValue"></infor-line>
          <infor-line title="户籍地址" v-bind:value="bsinfo.addresslong1"></infor-line>
          
          
          
          <infor-line title="集体户口" :value="bsinfo.cIsJtHukou == 'Y' ? '是' : (bsinfo.cIsJtHukou == 'N' ? '否' : '')"></infor-line>
          <infor-line title="证件类型" v-bind:value="bsinfo.nationalIdTypeValue"></infor-line>
          <infor-line title="证件号码" v-bind:value="bsinfo.nationalId"></infor-line>
          <infor-line title="有无驾照"  :value="bsinfo.cIsJiazhao == 'Y' ? '有' : (bsinfo.cIsJiazhao == 'N' ? '无' : '')"></infor-line>
          
          <infor-line title="驾照开始日期" v-bind:value="bsinfo.cJiazhaoDt1"></infor-line>
          <infor-line title="驾照结束日期" v-bind:value="bsinfo.cJiazhaoDt2"></infor-line>
          <infor-line title="行驶证日期" v-bind:value="bsinfo.cXingshizheDt"></infor-line>
          <infor-line title="档案编号" v-bind:value="bsinfo.cPerDabh"></infor-line>
          <infor-line title="导师" v-bind:value="bsinfo.cEmplName"></infor-line>
          
          <infor-line title="爱心基金成员"  :value="bsinfo.cYn == 'Y' ? '是' : (bsinfo.cYn == 'N' ? '否' : '')"></infor-line>
          <infor-line title="入会时间" v-bind:value="bsinfo.cPerRhdt"></infor-line>
          <infor-line title="家庭地址" v-bind:value="bsinfo.addresslong3"></infor-line>
          <infor-line title="是否住宿"  :value="bsinfo.cYn2 == 'Y' ? '是' : (bsinfo.cYn2 == 'N' ? '否' : '')"></infor-line>
          <infor-line title="是否外租房" :value="bsinfo.cYn3 == 'Y' ? '是' : (bsinfo.cYn3 == 'N' ? '否' : '')" ></infor-line>
          <infor-line title="住宿地址" v-bind:value="bsinfo.addresslong2"></infor-line>
          <infor-line title="是否二次入司" :value="bsinfo.cYn4 == 'Y' ? '是' : (bsinfo.cYn4 == 'N' ? '否' : '')" ></infor-line>
          <infor-line title="是否关注人员" :value="bsinfo.cYn9 == 'Y' ? '是' : (bsinfo.cYn9 == 'N' ? '否' : '')" ></infor-line>
          <infor-line title="是否人才池" :value="bsinfo.cYn5 == 'Y' ? '是' : (bsinfo.cYn5 == 'N' ? '否' : '')" ></infor-line>
          <infor-line title="是否帮扶池" :value="bsinfo.cYn6 == 'Y' ? '是' : (bsinfo.cYn6 == 'N' ? '否' : '')" ></infor-line>
          <infor-line title="是否关键岗位" :value="bsinfo.cYn7 == 'Y' ? '是' : (bsinfo.cYn7 == 'N' ? '否' : '')" ></infor-line>
          <infor-line title="是否高新人才" :value="bsinfo.cYn8 == 'Y' ? '是' : (bsinfo.cYn8 == 'N' ? '否' : '')" ></infor-line>
        </div>
    </folding>
    <folding title="联系信息" @feedback="setIsShowType" :initshow="true">
      <div class="normal-info" @click="toContact()">
        <infor-line title="移动电话" v-bind:value="bsinfo.phone"></infor-line>
        <infor-line title="公司短号" v-bind:value="bsinfo.cCpyShortPhone"></infor-line>
        <infor-line title="手机副号" v-bind:value="bsinfo.cSecPhone"></infor-line>
        <infor-line title="传真" v-bind:value="bsinfo.cFax"></infor-line>
        <infor-line title="个人Email" v-bind:value="bsinfo.emailAddr"></infor-line>
        <infor-line title="公司Email" v-bind:value="bsinfo.cEmailAddr"></infor-line>
        <infor-line title="公司电话" v-bind:value="bsinfo.phone2"></infor-line>
        <infor-line title="工作地点" v-bind:value="bsinfo.cWorkLocation"></infor-line>
        <infor-line title="岗位短号" v-bind:value="bsinfo.jobCodeNum"></infor-line>
        <infor-line title="紧急联系人姓名" v-bind:value="bsinfo.cEmeContact"></infor-line>
        <infor-line title="与本人关系" v-bind:value="bsinfo.cRelationFamValue"></infor-line>
        <infor-line title="紧急联系人电话" v-bind:value="bsinfo.cEmePhone"></infor-line>
      </div>
    </folding>
      <folding title="亲属信息" @feedback="setIsShowType" :initshow="true">
        <div  v-for="(item) in famVal" class="repeat-info" v-bind:key="item">
          <infor-line title="亲属关系" v-bind:value="item.cRelationFamValue"></infor-line>
          <infor-line title="亲属姓名" v-bind:value="item.cName"></infor-line>
          <infor-line title="工作地点" v-bind:value="item.cLocationDescr"></infor-line>
          <infor-line title="手机号" :noborder="true" v-bind:value="item.cPhone"></infor-line>
        </div>
      </folding>
      <folding title="教育经历" @feedback="setIsShowType" :initshow="true">
        <div class="timeline-info">
          <div class="tl-item" v-for="(item, index) in eduif" v-bind:key="item">
            <div class="tl-data">
              <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
              <img class="star" v-else src="./image/star-blue.png" alt="">
              <div class="tl-interval">{{item.startDt}} - {{item.endDt}}</div>
              <div>{{item.cSchool}}</div>
              <div>{{item.cMajor}}</div>
              <div>{{item.cEducitonValue}}    |     {{item.cDegreeValue}}</div>
            </div>
          </div>
        </div>
      </folding>
      <folding title="职称经历" @feedback="setIsShowType" :initshow="true">
        <div class="timeline-info">
          <div class="tl-item" v-for="(item, index) in zgzVal" v-bind:key="item">
            <div class="tl-data">
              <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
              <img class="star" v-else src="./image/star-blue.png" alt="">
              <div class="tl-interval">{{item.cName}}[<span style="color:red">{{item.cDate}}评定</span>]</div>
              <div>{{item.cPfqTypeValue}}           {{item.cZsbh}} </div>
              <div>评定机构： {{item.cCompany}}</div>
            </div>
          </div>
        </div>
      </folding>
      <div class="matters">
        <folding title="入公司后工作经历" @feedback="setIsShowType" :initshow="true">
          <div class="timeline-info">
            <div class="tl-item" v-for="(item, index) in afters" v-bind:key="item">
              <div class="tl-data">
                <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
                <img class="star" v-else src="./image/star-blue.png" alt="">
                <div class="tl-interval">
                  {{item.bgnDt|dateFormat}} - {{ item.endDt|dateFormat}}
                </div>
                <div>
                  <span class="important"></span>{{item.cDescr}}
                </div>
                <div>{{item.cDescr1}} | 职等: {{item.rsJobLevel}}</div>
                <div>直接上级: {{item.cDescr2}} | 通用晋升职等: {{item.cJobLevelP}}</div>
                <div>职位类型: {{item.cJobtypeDesc}}</div>
              </div>
            </div>
            <br>
          </div>
        </folding>
      </div>
      <folding title="入公司前工作经历" @feedback="setIsShowType" :initshow="true">
        <div class="timeline-info">
          <div class="tl-item" v-for="(item, index) in expwVal" v-bind:key="item" >
            <div class="tl-data">
              <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
              <img class="star" v-else src="./image/star-blue.png" alt="">
              <div class="tl-interval">
                {{item.startDt}} - {{item.endDt}}
              </div>
              <div>{{item.cCompany}}</div>
              <div>{{item.cPosition}}</div>
            </div>
          </div>
        </div>
      </folding>
      <folding title="外语能力" @feedback="setIsShowType" :initshow="true">
        <div  v-for="(item) in lanVal" class="repeat-info" v-bind:key="item">
          <infor-line title="语言" v-bind:value="item.rsLangCdValue"></infor-line>
          <infor-line title="外语证书" v-bind:value="item.cDescr"></infor-line>
          <infor-line title="熟练度" v-bind:value="item.cLangLvValue"></infor-line>
        </div>
      </folding>

      
      <folding title="银行账号" @feedback="setIsShowType" :initshow="true">
        <div class="normal-info">
          <infor-line title="开户银行名称" v-bind:value="bankv"></infor-line>
          <infor-line title="分/支行" v-bind:value="bnkVal.rsBranchNm"></infor-line>
          <infor-line title="银行账号" v-bind:value="bnkVal.accountEcId"></infor-line>
          <infor-line title="账户名称" v-bind:value="bnkVal.accountName"></infor-line>
        </div>
      </folding>

      
      <!-- <folding title="个人及配偶设立信息" @feedback="setIsShowType" :initshow="true">
        <div  v-for="(item) in chiguVal" class="repeat-info" v-bind:key="item">
          <infor-line title="公司名称" v-bind:value="item.cCompany"></infor-line>
          <infor-line title="任职情况" v-bind:value="item.cHireRzqk"></infor-line>
          <infor-line title="本人持股" v-bind:value="item.cHireBrChigu"></infor-line>
          <infor-line title="配偶持股" v-bind:value="item.cHirePoChigu"></infor-line>
          <infor-line title="与奥克斯业务往来" v-bind:value="item.cHireIsRealAux == 'Y' ? '有' : (item.cHireIsRealAux == 'N' ? '无' : '') "></infor-line>
        </div>
      </folding> -->
      
      <div stype="width:100%;height:30px">&nbsp;</div>
  </div>
</template>
<script>
  import {dateFormat} from 'vux'
  import sexFa from '../userInfo/image/sexf.png'
  import Folding from './common/Folding'
  import InforLine from '../../components/basic/InforLine'
  import CommonUtil from '../../components/basic/util'
  
  import {getBank, getBasicUserDetail,getBasicInfo, getPfam,getPEdu,getPWork,getEmpAfter,getPzcgl,getPlan,getPChigu,getPbnk } from '../../api/api'

  export default {
    components: {
      Folding,
      InforLine
    },
    mounted(){
      this.emplid = this.$route.query.eplid ? this.$route.query.eplid : this.$store.state.eid;
      if(this.emplid){
        this.userDetail();
        this.baseInfo();
        this.getFams();
        this.getEdus()
        this.getZcjl()
        this.getExpwork();
        this.getAfters();
        this.getLans();
        this.getBnkaccs();
        // this.getChigu();
      }
    },
    methods: {
      userDetail() {
        //根据 emplId,cSeqno 获取用户信息
        getBasicInfo({
          emplid: this.emplid
        }).then(res=>{
          //成功：000000
          if(res && res.retCode === '000000'){
            if(res.retData.sex === 'F'){
              res.retData.sexf = require('../userInfo/image/sexf.png');
            }else if(res.retData.sex === 'M'){
              res.retData.sexf = require('../userInfo/image/sexm.png');
            }
            res.retData.headfimg = require('../userInfo/image/man.png');
            if(res.retData.photoUrl){
              res.retData.headfimg = this.$store.state.logoAttachPath+res.retData.photoUrl;
            }else if(res.retData.sex === 'F'){
              res.retData.headfimg = require('../userInfo/image/women.png');
            }
            res.retData.rsWklifBgnDt = dateFormat(new Date(res.retData.rsWklifBgnDt), "YYYY-MM-DD");
            this.user = res.retData;
          }else{
            console.log(res.retMsg);
          }
        }).catch( res=>{
          //TODO
        });
      },
      baseInfo() {
        getBasicUserDetail({
          emplid: this.emplid
        }).then(res=>{
          //成功：000000
          if(res && res.retCode === '000000'){
            if(res.retData.zhuanzhengDt){
              res.retData.zhuanzhengDt = dateFormat(new Date(res.retData.zhuanzhengDt), 'YYYY-MM-DD');
            }
            if(res.retData.firstInCompanyDt) {
              res.retData.firstInCompanyDt = dateFormat(new Date(res.retData.firstInCompanyDt), 'YYYY-MM-DD');
            }
            
            res.retData.rsWklifBgnDt = dateFormat(new Date(res.retData.rsWklifBgnDt), "YYYY-MM-DD");
            this.bsinfo = res.retData;
          }else{
            console.log(res.retMsg);
          }
        }).catch( res=>{
          //TODO
        });
      },
      setIsShowType(title) {
        // if (this.foldingIndex < 0) {
        //   if(this.isFirst){
        //     this.foldings[0].isShow = true
        //     this.isFirst = false
        //   }
        // } else {
        //   this.foldings[this.foldingIndex].isShow = false
        // }
        // this.foldingIndex = this.foldings.findIndex(value => value.isShow)
      },
      //入公司前工作经历
      getExpwork() {
        getPWork({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.expwVal.push(...res.retData)
            }else{
              this.expwVal.push(res.retData)
            }
          } else {
            alert(res.retMsg);
          }
        })
      },
      //入公司后工作经历
      getAfters() {
        getEmpAfter({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            console.log(res.retData)
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.afters.push(...res.retData)
            }else{
              this.afters.push(res.retData)
            }
          } else {
            alert(res.retMsg);
          }
        })
      },
      //获取教育经历
      getEdus() {
        getPEdu({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.eduif.push(...res.retData)
            }else{
              this.eduif.push(res.retData)
            }
            console.log(res.retData)
          } else {
            alert(res.retMsg);
          }
        })
      },
      //职称经历
      getZcjl() {
        getPzcgl({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            console.log(res.retData)
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.zgzVal.push(...res.retData)
            }else{
              this.zgzVal.push(res.retData)
            }
          } else {
            alert(res.retMsg);
          }
        })
      },
      //语言能力
      getLans() {
        getPlan({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.lanVal.push(...res.retData)
            }else{
              this.lanVal.push(res.retData)
            }
          } else {
            alert(res.retMsg);
          }
        })
      },
      //持股信息
      getChigu() {
        getPChigu({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.chiguVal.push(...res.retData)
            }else{
              this.chiguVal.push(res.retData)
            }
          } else {
            alert(res.retMsg);
          }
        })
      },
      //亲属信息
      getFams() {
        getPfam({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            if(Object.prototype.toString.call(res.retData) === '[object Array]'){
              this.famVal.push(...res.retData)
            }else{
              this.famVal.push(res.retData)
            }
          } else {
            alert(res.retMsg);
          }
        })
      },
      //银行信息
      getBnkaccs() {
        let params = {rsHireId: this.empid}
        getPbnk({emplid: this.emplid}).then(res => {
          if (res && res.retCode === '000000') {
            this.bnkVal = res.retData
            this.getBanklb(res.retData.bankCd)
          } else {
            alert(res.retMsg);
          }
        })
      },
      //银行
      getBanklb(valbnk) {
        getBank().then(res => {
          res.retData.forEach((val) => {
            if(val.bankCd == valbnk){
              this.bankv = val.descrshort
            }
          });
        })
      },
      goHome() {
        this.$router.push({ path:'/main' });
      }
    },
    data() {
      return {
        user:{},
        bsinfo:  {},
        foldingIndex: -1,
        isFirst: true,
        foldings:[],
        eduif: [],
        expwVal: [],
        afters: [],
        // chiguVal: [],
        lanVal: [],
        famVal: [],
        bankv: '',
        bnkVal: {},
        zgzVal: [],
        empid: '',
        routerLink: ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .user_card {
    width: 100%;
    height: 240px;
    position: relative;
    box-sizing: border-box;
    .user_back{
      width: 100%;
      height: 160px;
      position: absolute;
      top: 0;
      left: 0;
      background: #0A5287;
      z-index: 0;
    }
    .card_info{
      position: absolute;
      width: 88%;
      height: 200px;
      top: 20px;
      left: 6%;
      background: white;
      border-radius: 8px;
      padding: 10px;
      z-index: 10;
      box-sizing: border-box;
      box-shadow: 3px 3px 5px #888;
      .user_headimg{
        width: 30%;
        height: 120px;
        border-radius: 160px;
        float: left;
        background-size: 100% 100%;
        background-position: center center;
        border: 1px solid #eee;
        margin-top: 30px;
      }
      .user_infors{
        width: 60%;
        margin-right: 5%;
        float: right;
        text-align: center;
        .nick_name{
          font-size: 16px;
          color: #000;
          line-height: 40px;
          font-weight: 600;
        }
        .user_info {
          color: #666;
          line-height: 30px;
          font-size: 14px;
        }
        .user_phone{
          line-height: 40px;
          color: #666;
          font-size: 14px;
          &::before{
            content: " ";
            width: 20px;
            height: 25px;
            background-image: url(./image/mphIcon.png);
            float: left;
            margin: 5px 0 0 20px;
          }
        }
      }
    }
  }

  .repeat-info,.normal-info {
    .detailed-info-box {
      display: flex;
      margin-bottom: 15px;
      .label {
        flex: 2;
        font-size:14px;
        text-align: right;
      }
      .label-value {
        flex: 4;
        font-size:14px;
        text-align: left;
        margin-left: 10px;
      }
      .icon {
        flex: 1;
      }
    }
  }
  .normal-info {
    margin: 2px 20px 10px 20px;
  }
  .repeat-info {
    padding: 0px 20px 10px 20px;
    border-bottom: 2px solid #e5e5e5;
  }

  .timeline-info{
    align-items: center;
    padding-left: 35px;
    padding-top: 10px;
    .tl-item {
      text-align: left;
      padding-left: 15px;
      border-left: 1px darkcyan solid;
      line-height: 20px;
      position: relative;
      display: flex;
      .tl-data{
        flex: 5;
        margin-bottom:8px;
        .star {
          position: absolute;
          left: -6px;
          top: 0px;
        }
        .tl-interval{
          font-size: 16px;
          color: #777;
          font-weight: 500;
        }
      }
      .tl-arrow{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #888888;
      }
    }
  }
  
</style>
